<template>
  <div style="width: 100%; padding: 0 0; position: relative">
    <el-form ref="form" :model="form" :rules="rules" label-width="200px" size="medium">
      <div class="diagnose_2_form">
        <div>
          <el-form-item label="门店名称" prop="salonName">
            <div style="width: 330px">{{ form.salonName }}</div>
          </el-form-item>
          <el-form-item v-if="form.id" label="复盘单编号" prop="diagnoseNo">
            <div style="width: 330px">{{ form.diagnoseNo }}</div>
          </el-form-item>
          <el-form-item label="门店规模" prop="salonScale">
            <div style="width: 330px">{{ getBaseEnumName(form.salonScale, 'salonSize') }}</div>
          </el-form-item>
          <el-form-item label="门店属性" prop="salonAttribute">
            <div style="width: 330px">{{ getBaseEnumName(form.salonAttribute, 'salonAttr') }}</div>
          </el-form-item>
          <el-form-item label="门店类型" prop="salonType">
            <div style="width: 330px">{{ getBaseEnumName(form.salonType, 'salonType') }}</div>
          </el-form-item>
          <el-form-item label="商圈环境" prop="businessEnvironment">
            <div style="width: 330px">{{ getBaseEnumName(form.businessEnvironment, 'businessEnvironment') }}</div>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="上次装修时间" prop="lastDecorationTime">
            <div style="width: 330px">{{ form.lastDecorationTime }}</div>
          </el-form-item>
          <el-form-item label="经营启动时间" prop="operationStartTime">
            <div style="width: 330px">{{ form.operationStartTime }}</div>
          </el-form-item>
          <el-form-item label="主要竞争力自评(占70%)" prop="mainCompetition">
            <div style="width: 330px">{{ getBaseEnumName(form.mainCompetition, 'salonCompetitiveness') }}</div>
          </el-form-item>
          <el-form-item label="次要竞争力自评(占30%)" prop="subCompetition">
            <div style="width: 330px">{{ getBaseEnumName(form.subCompetition, 'salonCompetitiveness') }}</div>
          </el-form-item>
          <el-form-item label="主要缺陷自评(占70%)" prop="mainDefect">
            <div style="width: 330px">{{ getBaseEnumName(form.mainDefect, 'salonCompetitiveness') }}</div>
          </el-form-item>
          <el-form-item label="次要缺陷自评(占30%)" prop="subDefect">
            <div style="width: 330px">{{ getBaseEnumName(form.subDefect, 'salonCompetitiveness') }}</div>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getBaseEnums } from '@/api/diagnose';
// 引入自定义组件
import '@/utils/datefmt';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

export default {
  name: 'Diagnose2',
  data() {
    return {
      listSalon: [],
      baseEnums: {},
      isFetching: false,
      form: {
        id: undefined,
        salonId: '',
        salonNo: '',
        salonName: '',
        diagnoseNo: '',
        salonScale: '',
        salonAttribute: '',
        salonType: '',
        businessEnvironment: '',
        lastDecorationTime: '',
        operationStartTime: '',
        mainCompetition: '',
        subCompetition: '',
        mainDefect: '',
        subDefect: '',
      },
      rules: {},
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId']),
  },
  created() {
    this.loadBaseEnums();
  },
  methods: {
    picDisabledDate(date) {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      return !(date - today < 0);
    },
    loadBaseEnums: async function () {
      const errAlertMsg = '查询类型失败';
      getBaseEnums()
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.baseEnums = Object.assign({}, ret);
          }
        })
        .catch(err => {
          console.log('loadBaseEnums', err);
          MessageBox.alert(errAlertMsg);
        });
    },
    loadDiagnoseData: async function (baseDiagnose) {
      if (!baseDiagnose || !baseDiagnose.diagnoseNo) {
        return;
      }
      this.form = Object.assign({}, baseDiagnose);
    },
    getBaseEnumName: function (val, attrName) {
      const e = this.baseEnums[attrName].find(x => x.code == val);
      if (e) {
        return e.name;
      }
      return '';
    },
  },
};
</script>

<style lang="scss" scoped>
.diagnose_2_form {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 50px;
}
.diagnose_2_form label {
  width: 90px;
  color: #99a9bf;
}
.diagnose_2_form .el-form-item {
  margin-right: 0;
  margin-bottom: 5px;
  width: 50%;
}
</style>
